<template>
    <div id="faceServe">
        <c-title 
            :hide="false"
            :text="'面对面服务'"
            :class="faceServetitle"
            :style="'background-color:'+'var(--themeBaseColor)'"></c-title>
        <div class="face-head" :style="'background-color:'+'var(--themeBaseColor)'">
            <div>
                <h1>线下联盟商家</h1>
                <h3>同步线下售卖与服务</h3>
            </div>
        </div>
        <!-- <div class="face-form">
            <el-form :model="query" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="活动名称" prop="title" required>
                    <el-input v-model="query.title"></el-input>
                </el-form-item>
            </el-form>
        </div> -->
        <div class="face-form">
                <van-field
                    name="validator"
                    v-model="query.title"
                    required
                    @blur="monitorInput"
                    :border="false"
                    trigger="onChange"
                    label="商品名称或服务名称"
                />
                <van-cell title="商品数量" required title-class="face-cell" :border="false">
                    <template #right-icon>
                        <van-stepper v-model="query.recharge_total"  input-width="50px" />
                    </template>
                </van-cell>
                <van-field
                    v-model="query.recharge_member_mobile"
                    required
                    :border="false"
                    trigger="onBlur"
                    label="消费者手机号码"
                    @input="monitorMoblie"
                    :class="[isActive?'active':'']"
                    type="number"
                >
                <template #extra >
                    <div class="errorRed" v-if="errorText">{{errorText}}</div>
                </template>
                </van-field>
                <van-field
                    v-model="query.recharge_merchant_mobile"
                    required
                    :border="false"
                    label="商家手机号码"
                    :class="[shopsActive?'shopsActive':'']"
                    @input="merchantMoblie"
                >
                    <template #extra >
                        <div class="errorRed" v-if="ShopsErrorText">{{ShopsErrorText}}</div>
                    </template>
                </van-field>
                <van-field
                    v-model="amount"
                    required
                    :border="false"
                    label="现场实收金额"
                    type="number"
                    maxlength="11"
                    @input="changeprice"
                >
                </van-field>
                <div class="agreement">
                    <van-checkbox v-model="checked"   icon-size="12px"></van-checkbox>
                    <div class="agree">
                        <span>请同意</span> <span class="agree-red">热心服务，拒绝欺骗，禁止虚假交易，遵守国家法律</span>
                    </div>
                </div>
        </div>
        <div class="face-integral">
            <div class="integral">
                <p class="title">消费者获得{{setting.point_name}}</p>
                <p class="price" >{{Number(amount).toFixed(2) || '0.00'}}</p>
            </div>
            <div class="integral">
                <p class="title">商家可获得{{setting.love_name}}</p>
                <p class="price">{{Number(merchant_love_value).toFixed(2) || '0.00'}}</p>
            </div>
        </div>
        <block v-if="flag">
            <van-button  class="order-pay" @click="orderPay" loading  loading-text="跳转中...">支付￥{{query.amount || '0.00'}}</van-button>
        </block>
        <block v-else>
            <van-button  class="order-pay" @click="orderPay"    v-if=" query.amount !== '' &&  query.amount !== '0.00' &&  query.amount !== 0">支付￥{{query.amount || '0.00'}}</van-button>
            <van-button  class="order-pay" @click="orderPay" disabled  v-else>支付￥{{query.amount || '0.00'}}</van-button>
        </block>
        
        <div class="mb10"></div>
    </div>
</template>

<script>
import faceServe from './faceServe';
export default faceServe;
</script>
<style scoped>
.serve-title  ::v-deep  .van-nav-bar{
    background-color:var(--themeBaseColor);
}
.serve-title  ::v-deep  .van-nav-bar__content{
    background-color:var(--themeBaseColor);
}
.serve-title   ::v-deep .van-nav-bar__left .van-button{
   background-color:var(--themeBaseColor);
}
.serve-title  ::v-deep   .van-nav-bar__title {
    font-size: 1.125rem;
    color: #FFFFFF;
    font-weight: 100;
}
.serve-title   ::v-deep  .van-button__icon {
    font-size: 1.125rem;
    color: #FFFFFF;
    font-weight: 100;
}

.face-form  ::v-deep .van-field {
    flex-direction: column;
    border-radius: 0.625rem;
}
.face-form  ::v-deep  .van-field:last-child {
    padding-bottom: 1.875rem;
}
.face-form   ::v-deep .van-field__label {
    width: auto;
    font-size: 0.75rem;
    color:#333333;
}
.face-form   ::v-deep  .van-cell--required::before {
    top:0.75rem;
}
.face-form  ::v-deep  .van-field__control {
    background: #F4F4F4;
    border-radius: 5.0016px;
    height: 2.0625rem;
    padding-left: 0.875rem;
    margin-top: 0.625rem;
}
.face-form  ::v-deep .active  .van-field__control , .face-form ::v-deep   .shopsActive .van-field__control{
    border:1px solid red;
}
.face-form  ::v-deep .van-field:last-child .van-field__control {
     padding-left: 0;
     background: #fff;  
}
.face-form ::v-deep  .van-field__value .van-field__button {
    margin-top: 0.625rem;
}
.face-form  ::v-deep  .van-stepper__input {
    border-radius: 0.3125rem;
}
.face-form  ::v-deep .van-stepper__minus {
    width: 0.9375rem;
    height: 0.9375rem;
    margin-right: 0.5625rem;
}
.face-form  ::v-deep.van-stepper__plus {
    width: 0.9375rem;
    height: 0.9375rem;
    margin-left: 0.5625rem;
}
.face-form  ::v-deep  .van-field__control--custom {
    align-items: flex-start;
}

.face-form  .agreement {
    display: flex;
    padding: 0 1rem 1rem 1rem;
}
/* .face-form  ::v-deep  .van-checkbox__icon {
    margin-top:0.625rem;
} */
.face-form  ::v-deep  .van-checkbox {
    padding-right: .625rem;
}
.face-form  ::v-deep  .van-checkbox__icon .van-icon {
         line-height: 0.7rem;
}
</style>
<style  lang="scss" scoped>
    #faceServe{
        .face-head {

            height: 9.375rem;
            box-sizing: border-box;
            background: #5BC587;
            position: relative;
            h1 {
                font-size: 2.5rem;
                font-weight: 400;
                color: #FFFFFF;
                padding: .7rem 0 1rem 0;
                text-align: center;
            }
            h3 {
                font-size: 1.125rem;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                padding: 0 0 1.1875rem 0;
            }
        }
        .face-form {
            margin: 0 0.625rem 0 0.625rem;
            position: relative;
            top:-2.4375rem;
            background: #fff;
            border-radius: 0.625rem;
            .form-content {
                border-radius: 0.625rem;
                // padding: 0 0 1.25rem 0;
            }
            .face-cell {
                text-align: left;
                font-size: 0.625rem;
            }
            .errorRed {
                color: red;
                margin-top:0.375rem;
                font-size: 0.625rem;
                text-align: left;
            }
            .agree {
                font-size: 0.625rem;
                span {
                    // white-space:nowrap;
                }
                .agree-red {
                    color:#F20000;
                    font-size: 0.625rem;
                    text-align: left;
                }
            }
        }
        .face-integral {
            display: flex;
            justify-content: space-between;
            margin: 0 .625rem 0 .625rem;
            .integral {
                width: 10.9375rem;
                height: 5rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background: #FFFFFF;
                border-radius: .625rem;
                position: relative;
                top:-1.8125rem;
                .title {
                    color:#666666;
                    font-size: .6875rem;
                    margin-bottom: .75rem;
                }
                .price {
                    color:#F20000;
                    font-size: 1.125rem;
                }
            }
        }
        .order-pay {
            width: 11.25rem;
            height: 2.0625rem;
            line-height: 2.0625rem;
            background: #5BC489;
            border-radius: 5px;
            color: #FFFFFF;
            font-size: .75rem;
            margin: 0 auto;
            cursor:pointer;
        }
        .mb10 {
            height: .625rem;
            clear: both;
        }
    }
</style>